<template>
  <div v-show="show" class="to-top-container" @click="handleClick">
    Top
  </div>
</template>
<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import emitter from '@/utils/EventBus'

const show = ref(false)

onMounted(() => {
  emitter.on('mainScroll', handleScroll)
})

onBeforeUnmount(() => {
  emitter.off('mainScroll', handleScroll)
})

const handleScroll = (dom: HTMLDivElement) => {
  if (!dom) {
    show.value = false
    return
  }
  show.value = dom.scrollTop >= 500
}

const handleClick = () => {
  emitter.emit('scrollToTop', 0)
}
</script>
<style lang="less" scoped>
@import "@/styles/var.less";

.to-top-container {
  background: @primary;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: fixed;
  z-index: 99;
  right: 50px;
  bottom: 50px;
  cursor: pointer;
  line-height: 50px;
  color: #fff;
  text-align: center;
}
</style>